<template>
  <div class="chat">
      <top-header />
      <section class="body">
          <div v-show="index === 0" class="weixin">
              <div v-show="connecting === false" class="error-item">
                  <svg-icon class="warn" name="warning" />
                  <span>网络连接不可用</span>
              </div>
              <chat-item @click.native="chatWith(item)" v-for="(item, index) in chatArray" :key="index" :avatar="item.avatar" :name="item.name" :options="item.options" :time="item.time" />
          </div>
          <div v-show="index === 1" class="address">
              <address-book />
          </div>
      </section>
      <tabbar @select="changeTab" :tabbar="tabbar"/>
  </div>
</template>

<script>
import tabbar from '../../components/tabbar.vue'
import TopHeader from '../../components/header.vue'
import SvgIcon from '../../components/SvgIcon.vue'
import ChatItem from '../../components/chat-item.vue'
import { mapMutations, mapState } from 'vuex'
import AddressBook from './address-book.vue'
export default {
    name: 'chat',
    computed: {
        ...mapState([
            'connecting',
        ]),
    },
    data() {
        return {
            index: 0,
            chatArray: [
                {
                    avatar: 'https://www.tsdy.club/blog/medias/avatar.jpg',
                    name: '冬阳贝贝哥',
                    time: '昨天',
                    options: '朱老师是个伞兵，朱老师是个伞兵，朱老师是个伞兵'
                }
            ],
            tabbar: [
                {
                    name: '微信',
                    icon: 'weixin'
                },
                {
                    name: '通讯录',
                    icon: 'address'
                },
                {
                    name: '发现',
                    icon: 'found'
                },
                {
                    name: '我',
                    icon: 'mine'
                }
            ]
        }
    },
    methods: {
        changeTab(index) {
            this.SET_HEADER({
                title: this.tabbar[index].name,
                visible: true,
            })
            this.index = index;
        },
        chatWith(item) {
            this.$router.push({
                name: 'chat-online',
                params: {
                    title: item.name
                }
            })
        },
        ...mapMutations([
            'SET_HEADER'
        ])
        
    },
    components: {
        tabbar,
        TopHeader,
        SvgIcon,
        ChatItem,
        AddressBook
    },
    created() {
        for (let i = 0; i < 30; i ++) {
            this.chatArray.push(this.chatArray[0]);
        }
    }
}
</script>

<style scoped>
.chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.chat > .body {
    height: 100%;
    width: 100%;
    overflow: scroll;

}
.error-item {
    background-color: rgb(251, 232, 233);
    height: 36px;
    widows: 100%;
    display: flex;
    align-items: center;
}
.error-item > .warn {
    width: 16px;
    height: 16px;
    margin-left: 26px;
}
.error-item > span {
    margin-left: 12px;
    font-size: 14px;
}
</style>